<template>
  <div>
    <el-dialog title="添加券码" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
      <div class="content">
        <el-form
          :model="ruleForm"
          :inline="true"
          class="demo-form-inline"
          :rules="rules"
          label-width="100"
        >
          <el-form-item label="添加数量：" prop="num">
            <el-input v-model="ruleForm.num" placeholder="请输入价格" class="el-200" />
            <span class="yuan">件</span>
          </el-form-item>
          <el-form-item label="选择课程：" prop="class">
            <el-select
              v-model="ruleForm.class"
              multiple
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading"
              class="el-200"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="选择章节：" prop="chapter">
            <el-select v-model="ruleForm.chapter" clearable placeholder="全部" class="el-200" @change="selectChange">
              <el-option
                v-for="item of classicList"
                :key="item.id"
                :label="item.kind_name"
                :value="item.id"
              />
            </el-select>
            <!-- <el-cascader v-model="value" placeholder="全部" :options="classicList" clearable @change="handleChange" /> -->
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">添 加</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        num: '',
        class: '',
        chapter: ''
      },
      rules: {
        num: [{ required: true, message: '请输入成团人数', trigger: 'blur' }],
        class: [{ required: true, message: '请选择课程', trigger: 'blur' }],
        chapter: [{ required: true, message: '请选择章节', trigger: 'blur' }]
      },
      classicList: [
        {
          id: 1,
          kind_name: '课程'
        }
      ],
      options: [],
      value: [],
      list: [],
      loading: false,
      states: ['Alabama', 'Alaska', 'Arizona',
        'Arkansas', 'California', 'Colorado',
        'Connecticut', 'Delaware', 'Florida',
        'Georgia', 'Hawaii', 'Idaho', 'Illinois',
        'Indiana', 'Iowa', 'Kansas', 'Kentucky',
        'Louisiana', 'Maine', 'Maryland',
        'Massachusetts', 'Michigan', 'Minnesota',
        'Mississippi', 'Missouri', 'Montana',
        'Nebraska', 'Nevada', 'New Hampshire',
        'New Jersey', 'New Mexico', 'New York',
        'North Carolina', 'North Dakota', 'Ohio',
        'Oklahoma', 'Oregon', 'Pennsylvania',
        'Rhode Island', 'South Carolina',
        'South Dakota', 'Tennessee', 'Texas',
        'Utah', 'Vermont', 'Virginia',
        'Washington', 'West Virginia', 'Wisconsin',
        'Wyoming']
    }
  },
  methods: {
    handleClose(done) {
      this.dialogVisible = false
      // this.$confirm('确认关闭？')
      //   .then(_ => {
      //     done()
      //   })
      //   .catch(_ => {})
    },
    show() {
      this.dialogVisible = true
    },
    hidden() {
      this.dialogVisible = false
    },
    selectChange() {},
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.options = []
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.content {
  padding: 0 40px;
  box-sizing: border-box;
  width: 600px;
  .yuan {
    position: absolute;
    top: 0;
    right: 7px;
    color: #101010 !important;
  }
}
.el-200{
  width: 300px
}
</style>
